<template>
  <header class="header">
    <h1>todos</h1>
    <input
      class="new-todo"
      @keydown.enter="addTodo"
      v-model.trim="info"
      placeholder="What needs to be done?"
      autofocus
    />
  </header>
</template>

<script>
// 1. 为输入框绑定keydown.enter 事件, 修饰符只触发方法,具体新增的操作交给父组件
// 2. 传递输入框的输入的值  定义data数据,双向绑定给输入框
// 3. 触发方法的时候传递参数
// 4. 数据传递成功之后将数据清空
// 5. 父组件拿到数据新增数据(手动拼接一个对象)
export default {
  data(){
    return {
      info: ''
    }
  },
  methods: {
    addTodo() {
      // 如果用户没有输入,不应该触发这个方法
      if(!this.info) return alert('请输入要做的todo')
      this.$emit('add', this.info)
      this.info = ''
    }
  }
}
</script>

<style></style>
